<template>
  <div class="service-container">
    <img class="bgimg" src="../assets/img/banner3.png"/>
    <div class="container">
      <div class="cooper">
        <div class="cooper-item">
          <h1 class="step1">合 作 伙 伴</h1>
            <hr class="step2" color="#1889B2" width="30" />
            <div class="step3 icon-box">
              <img class="icon-itme" src="../assets/img/cooper9.jpg"/>
              <img class="icon-itme" src="../assets/img/cooper10.jpg"/>
              <img class="icon-itme" src="../assets/img/cooper11.jpg"/>
              <br style="clear: both;" />
            </div>
            <div class="split"><img src="../assets/img/arrow.jpg"/></div>
        </div>
        <div class="cooper-item">
          <h1 class="">服 务 流 程</h1>
            <hr class="" color="#1889B2" width="30" />
            <div class="flow-box">
              <p class="flowp p1">1.联系销售经理<br /><span>023-88255663 转888</span></p>
              <p class="flowp p2">2.沟通需求</p>
              <p class="flowp p3">3.签订《发货委托书》</p>
              <p class="flowp p4">4.付款发货</p>
              <p class="flowp p5">5.安装硬件，部署软件</p>
              <p class="flowp p6">6.投入使用</p>
              <p class="flowp p7">7.售后服务</p>
            	<img src="../assets/img/a1.png"/>
            </div>
            <div class="split"><img src="../assets/img/arrow.jpg"/></div>
        </div>
        <div class="cooper-item">
          <h1 class="">安 装 服 务</h1>
            <hr class="" color="#1889B2" width="30" />
            <div class="setup-title">
            	<p>专业安装策划&nbsp;&nbsp;&nbsp;新店快速安装<br />久店升级改造不影响正常运营</p>
            </div>
            <div class="icon-box">
              <div class="icon-itme">
                <img class="setup-img" src="../assets/img/p1.png"/>
                <p>智能更衣柜锁</p>
              </div>
              <div class="icon-itme">
                <img class="setup-img" src="../assets/img/p2.png"/>
                <p>智能门禁闸机盒子安装</p>
              </div>
              <div class="icon-itme">
                <img class="setup-img" src="../assets/img/p3.png"/>
                <p>智能门禁安装</p>
              </div>
              <br style="clear: both;" />
            </div>
            <div class="split"><img src="../assets/img/arrow.jpg"/></div>
        </div>
        <!--<div class="cooper-item">
          <h1 class="step4">合 作 对 象</h1>
            <hr class="step5" color="#1889B2" width="30" />
            <div class="step6 icon-box" style="width: 80%;">
              <div class="icon-itme">
                <p>高端健身房</p>
                <img height="40" src="../assets/img/fiticon1.png"/>
                <p>健身房智能道闸，智能储物柜，智能淋浴系统等一体化智能化解决方案。 </p>
              </div>
              <div class="icon-itme">
                <p>初创健身房</p>
                <img height="40" src="../assets/img/fiticon2.png"/>
                <p>指纹储物柜系统,FRID储物柜系统。</p>
              </div>
              <div class="icon-itme">
                <p>CRM,POS系统公司</p>
                <img height="40" src="../assets/img/fiticon3.png"/>
                <p>设备API，让您快速整合我们的一体化智能设备，为您的客户提供更加优质的服务！</p>
              </div>
              <br style="clear: both;" />
            </div>
            <div class="split"><img src="../assets/img/arrow.jpg"/></div>
        </div>-->
        <div class="cooper-item">
          <h1 class="step7">现 场 实 施</h1>
            <hr class="step8" color="#1889B2" width="30" />
          <div id="container" class="step9 icon-box" style="width: 80%;padding-bottom: 20%;">
              <ul class="ver-box">
                <a class="ver-item ver-left">
                	<img class="" src="../assets/img/cooper1.jpg" alt="" data-caption="储物柜</br>智能更衣锁"/>
                </a>
              	<a class="ver-item ver-right-top">
                  <img class="" src="../assets/img/cooper7.jpg" alt="" data-caption="智能手环"/>
                </a>
                <a class="ver-item ver-right-bottom">
                  <img class="" src="../assets/img/cooper8.jpg" alt="" data-caption="智能储物柜"/>
                </a>
                <a class="hor-item">
                  <img class="" src="../assets/img/cooper2.jpg" alt="" data-caption="智能门禁闸机"/>
                </a>
              </ul>
              <ul class="ver-box">
                <a class="hor-item-reverse">
                	<img class="" src="../assets/img/cooper4.jpg" alt="" data-caption="智能门禁闸机"/>
                </a>
                <a class="ver-item ver-left-revrese">
                  <img class="" src="../assets/img/cooper3.jpg" alt="" data-caption="智能更衣柜"/>
                </a>
                <a class="ver-item ver-right-top-reverse">
                  <img class="" src="../assets/img/cooper5.jpg" alt="" data-caption="智能更衣柜"/>
                </a>
                <a class="ver-item ver-right-bottom-reverse">
                  <img class="" src="../assets/img/cooper6.jpg" alt="" data-caption="智能手环"/>
                </a>
              </ul>
              <br style="clear: both;" />
          </div>
        </div>
      </div>
    <bottom></bottom>
    </div>
  </div>
</template>

<script>

import Bottom from './Bottom'
import '../../static/jquery.sliphover.min'
export default {
  name: 'service',
  data () {
    return {
    }
  },components:{
    Bottom
  },created(){
    setTimeout(function(){
      $('#container').sliphover({
        caption: 'data-caption'
      });
      var i = 1;
      for(i;i<=9;i++){
        $(".step"+i).css({"opacity":"1"});
      }
      $(".flow-box img").css({"width":"700px"});
    })
  },mounted(){
      $(".flowp").each(function(index,ele){
        var t = $(this);
        setTimeout(function(){
          t.css({"opacity":"1"});
          t.addClass("scaleani");
        },index*200)
      })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.step1,.step2,.step3,.step4,.step5,.step6,.step7,.step8,.step9{
  opacity:0;
}
  .bgimg{width: 100%;min-width: 1000px;}
.step1{  transition: all .3s .1s;}
.step2{  transition: all .3s .2s;}
.step3{  transition: all .3s .3s;}
.step4{  transition: all .3s .4s;}
.step5{  transition: all .3s .5s;}
.step6{  transition: all .3s .6s;}
.step7{  transition: all .3s .7s;}
.step8{  transition: all .3s .8s;}
.step9{  transition: all .3s .9s;}
.flow-box{height: 350px;position: relative;}
.flow-box p{letter-spacing: 2px; position: absolute;color: #333;text-align: left;font-size: 16px;opacity: 0;transition: all .3s 1s;}
.flow-box span{font-size: 14px;letter-spacing: 1px;}
.p1{left: 170px;top: 50px;}
.p2{left: 315px;top: 220px;}
.p3{left: 405px;top: 20px;}
.p4{left: 585px;top: 174px;}
.p5{left: 581px;top: 307px;}
.p6{left: 788px;top: 158px;}
.p7{left: 821px;top: 26px;}
.setup-title{font-size: 14px;line-height: 20px;color: #666;}
.setup-img{width: 60px;}
.flow-box img{ transition: all 1s .3s;width: 0;}
.icon-box{width: 60%;margin:20px auto;}
.icon-itme:hover{
  cursor: pointer;
  animation:iconscale .8s;
  -webkit-animation:iconscale .8s;
}
.scaleani{
  animation:iconscale .5s ease-in-out 1s 1;
  -webkit-animation:iconscale .5s ease-in-out 1s 1;
}
@keyframes iconscale{
	0%{transform: scale(0.9);}
  50%{transform: scale(1.1);}
  100%{transform: scale(1);}
}
@-webkit-keyframes iconscale{
	0%{transform: scale(0.9);}
  50%{transform: scale(1.1);}
  100%{transform: scale(1);}
}
.icon-itme p:first-child{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.icon-itme p{ font-size: 14px;cursor: default;-moz-user-select: none;-webkit-user-select: none;}
.icon-box .icon-itme{
  width: 20%;
  margin-right: 20%;
  float: left;
}
.icon-box >.icon-itme:last-of-type{
  margin-right: 0;
}
.split{
  width: 80%;
  margin: 30px auto -30px;
  border-top: solid 1px #CFD1D0;
}
.split img{position: relative;top:-15px ;width: 20px;border: solid 5px white;}
.ver-box:first-of-type{margin-right: 2%;float: left;}
.ver-box{
  float: right;
  display: inline-block;
  padding-bottom: 72%;
  position: relative;
  width: 48%;
}
.ver-box img{
  display: block;
  width: 100%;
}
.hor-item,.hor-item-reverse{
  display: block;position: absolute;
  width: 100%;  
}
.hor-item,.ver-item,.hor-item-reverse{cursor: pointer;}
.hor-item{
  bottom: 0;
}
.hor-item-reverse{
  top: 0;
}
.ver-item{  
  display: inline-block;
  width: 46%;position: absolute;
}
.ver-left,.ver-left-revrese{
  left: 0;
  display: inline-block;
}
.ver-left-revrese{
  bottom:0;
}
.ver-right-top{
  right: 0;
  top: 0;
}
.ver-right-bottom{
  right: 0;
  top: 34.5%;
}
.ver-right-top-reverse{
  right: 0;
  bottom:35%;
}
.ver-right-bottom-reverse{
  right: 0;
  bottom:0;
}
.hor-item p,.ver-item p,.hor-item-reverse p{
  font-size: 14px;
  transition: all .5s;
  color: transparent;
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 50%;
  top: 0;
  margin: 0;
}
/*.hor-item:hover p,.ver-item:hover p,.hor-item-reverse:hover p{
  color: white;
  background: rgba(0,0,0,0.3);
}*/
  h1{
  margin-top: 0;
  font-weight: 400;
  color: #858585;
  font-size: 16px;
}
.cooper{
  left: 12%;
  position: relative;
  top: -30px;
  width: 76%;
  background: white;
}
.cooper-item:first-child{margin-top: 0;}
.cooper-item{
  padding-top: 40px;
  margin: auto;
}
.service-container{
  width: 100%;
  height: 100%;
}
.container{
  padding-bottom: 10px;
  position: relative;
  background: #F7F5F0;
}
.bgimg{
  display: block;
  width: 100%;
}
</style>
